<template>
  <!-- <el-card class="box-card" width="100%" height="100%">
    <div slot="header" class="clearfix">
      <span>总览</span>
    </div> -->
    <div id="grid">
      <div class="computer" id="computer" ref="computer">
        <div class="computertip" id="computertip" ref="computertip">
          <a style="margin-bottom:0;text-align:center;">计算机资源</a>
        </div>
        <div class="cpu" id="cpu" ref="cpu">
          <div class="draw" id="cpudraw" ref="cpudraw"/>
          <div class="content" id="cpucontent" ref="cpucontent">
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            CPU可分配核数：{{res.cpu_allocable}}
            </p>
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            CPU总核数：{{res.cpu_total}}
            </p>
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            CPU单次可分配最大核数：{{res.cpu_per_max}}
            </p>
          </div>
        </div>
        <div class="memory" id="memory" ref="memory">
          <div class="draw" id="memorydraw" ref="memorydraw"/>
          <div class="content" id="memorycontent" ref="memorycontent">
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            内存可分配量（MB）：{{res.men_allocable}}
            </p>
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            内存总量（MB）：{{res.men_total}}
            </p>
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            内存单次可分配最大量（MB）：{{res.men_per_max}}
            </p>
          </div>
        </div>
        <div class="gpu" id="gpu" ref="gpu">
          <div class="draw" id="gpudraw" ref="gpudraw"/>
          <div class="content" id="gpucontent" ref="gpucontent">
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            GPU可分配个数：{{res.gpu_allocable}}
            </p>
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            GPU总数：{{res.gpu_total}}
            </p>
            <p style="margin-left:15px;text-align:left;font-size:13px;">
            GPU单次可分配最大个数：{{res.gpu_per_max}}
            </p>
          </div>
        </div>
      </div>
      <div class="dataset" id="dataset" ref="dataset">
        <div class="datasettip" id="datasettip" ref="datasettip">
          <a style="margin-bottom:0;text-align:center;">数据集</a>
        </div>
        <div>
          <p class="linktext">
            <el-link href="/#/dataset/list/mine">我创建的数据集：{{datasetmycount}}</el-link>
          </p>
          <p class="linktext">
            <el-link href="/#/dataset/list/grant">我被授权的数据集：{{datasetgrantcount}}</el-link>
          </p>
        </div>
      </div>
      <div class="model" id="model" ref="model">
        <div class="modeltip" id="modeltip" ref="modeltip">
          <a style="margin-bottom:0;text-align:center;">模型</a>
        </div>
        <div>
          <p class="linktext">
            <el-link href="/#/model/list/mine">我创建的模型：{{modelmycount}}</el-link>
          </p>
          <p class="linktext">
            <el-link href="/#/model/list/grant">我被授权的模型：{{modelgrantcount}}</el-link>
          </p>
        </div>
      </div>
      <div class="trainjob" id="trainjob" ref="trainjob">
        <div class="trainjobtip" id="trainjobtip" ref="trainjobtip">
          <a style="margin-bottom:0;text-align:center;">训练任务</a>
        </div>
        <div>
          <p class="linktext">
            <el-link href="/#/trainjob/list/mine">我创建的训练任务：{{trainjobmycount}}</el-link>
          </p>
        </div>
      </div>
      <div class="app" id="app" ref="app">
        <div class="apptip" id="apptip" ref="apptip">
          <a style="margin-bottom:0;text-align:center;">AI应用</a>
        </div>
        <div>
          <p class="linktext">
            <el-link href="/#/app/list/mine">我创建的AI应用：{{appmycount}}</el-link>
          </p>
        </div>
      </div>
    </div>
  <!-- </el-card> -->
</template>
<script>
import { getComputerSource } from '@/api/request/computer'
import { getDatasetList, getDatasetListGrant } from '@/api/request/dataset'
import { getModelList, getModelListGrant } from '@/api/request/model'
import { getTrainjobList } from '@/api/request/trainjob'
import { getAppList } from '@/api/request/application'
import echarts from 'echarts'
export default {
  data () {
    return {
      res: {
        cpu_allocable: 10,
        cpu_total: 59,
        cpu_per_max: 5,
        gpu_allocable: 10,
        gpu_total: 59,
        gpu_per_max: 5,
        men_allocable: 10,
        men_total: 59,
        men_per_max: 5
      },
      datasetmycount: 10,
      datasetgrantcount: 19,
      modelmycount: 5,
      modelgrantcount: 10,
      trainjobmycount: 19,
      appmycount: 20
    }
  },
  created () {

  },
  mounted () {
    this.update()
  },
  methods: {
    update () {
      getComputerSource().then(response => {
        console.log(response)
        this.res = response
        this.res.men_total = Math.round(this.res.men_total / 1024 / 1024)
        this.res.men_allocable = Math.round(this.res.men_allocable / 1024 / 1024)
        this.res.men_per_max = Math.round(this.res.men_per_max / 1024 / 1024)
        console.log(this.res)
        this.drawComputer()
      })
      getDatasetList().then(response => {
        this.datasetmycount = response.length
      })
      getDatasetListGrant().then(response => {
        this.datasetgrantcount = response.length
      })
      getModelList().then(response => {
        this.modelmycount = response.length
      })
      getModelListGrant().then(response => {
        this.modelgrantcount = response.length
      })
      getTrainjobList().then(response => {
        this.trainjobmycount = response.length
      })
      getAppList().then(response => {
        this.appmycount = response.length
      })
    },
    drawComputer () {
      const cpuChart = echarts.init(this.$refs.cpudraw)
      cpuChart.setOption({
        title: {
          text: 'CPU使用情况',
          x: 'center',
          y: 'top',
          top: 20,
          textStyle: {
            color: 'black',
            fontSize: 15
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          left: 35,
          top: 40,
          itemWidth: 20,
          itemHeight: 20,
          formatter: '{name}',
          textStyle: {
            color: 'black'
          }
        },
        color: ['blue', 'gray'],
        series: [{
          name: 'cpu情况',
          type: 'pie', // 设置图表类型为饼图
          radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: [ // 数据数组，name 为数据项名称，value 为数据项值
            {value: this.res.cpu_total - this.res.cpu_allocable, name: 'CPU已使用'},
            {value: this.res.cpu_allocable, name: 'CPU未使用'}
          ],
          label: {
            normal: {
              show: true,
              formatter: '{b} : {c} ({d}%)',
              textStyle: {
                fontSize: 10
              }
            },
            labelLine: {show: true}
          }
        }]
      })
      const memChart = echarts.init(this.$refs.memorydraw)
      memChart.setOption({
        title: {
          text: '内存使用情况',
          x: 'center',
          y: 'top',
          top: 20,
          textStyle: {
            color: 'black',
            fontSize: 15
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          left: 35,
          top: 40,
          itemWidth: 20,
          itemHeight: 20,
          formatter: '{name}',
          textStyle: {
            color: 'black'
          }
        },
        color: ['orange', 'pink'],
        series: [{
          name: '内存情况',
          type: 'pie', // 设置图表类型为饼图
          radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: [ // 数据数组，name 为数据项名称，value 为数据项值
            {value: this.res.men_total - this.res.men_allocable, name: '内存已使用'},
            {value: this.res.men_allocable, name: '内存未使用'}
          ],
          label: {
            normal: {
              show: true,
              formatter: '{b} : {c} ({d}%)',
              textStyle: {
                fontSize: 10
              }
            },
            labelLine: {show: true}
          }
        }]
      })
      const gpuChart = echarts.init(this.$refs.gpudraw)
      gpuChart.setOption({
        title: {
          text: 'GPU使用情况',
          x: 'center',
          y: 'top',
          top: 20,
          textStyle: {
            color: 'black',
            fontSize: 15
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          left: 35,
          top: 40,
          itemWidth: 20,
          itemHeight: 20,
          formatter: '{name}',
          textStyle: {
            color: 'black'
          }
        },
        color: ['turquoise', 'green'],
        series: [{
          name: 'GPU情况',
          type: 'pie', // 设置图表类型为饼图
          radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: [ // 数据数组，name 为数据项名称，value 为数据项值
            {value: this.res.gpu_total - this.res.gpu_allocable, name: 'GPU已使用'},
            {value: this.res.gpu_allocable, name: 'GPU未使用'}
          ],
          label: {
            normal: {
              show: true,
              formatter: '{b} : {c} ({d}%)',
              textStyle: {
                fontSize: 10
              }
            },
            labelLine: {show: true}
          }
        }]
      })
      // getComputerSource().then(response => {
      //   const cpuChart = echarts.init(this.$refs.cpu)
      //   cpuChart.setOption({
      //     series: [{
      //       name: 'cpu情况',
      //       type: 'pie', // 设置图表类型为饼图
      //       radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
      //       data: [ // 数据数组，name 为数据项名称，value 为数据项值
      //         {value: response.cpu_total - response.cpu_allocable, name: 'cpu已使用'},
      //         {value: response.cpu_allocable, name: 'cpu未使用'}
      //       ]}
      //     ]
      //   })
      // })
    },
    drawLine () {
      // let echarts = require('echarts/lib/echarts')
      // // 引入柱状图组件
      // require('echarts/lib/chart/bar')
      // // 引入提示框和title组件
      // require('echarts/lib/component/tooltip')
      // require('echarts/lib/component/title')
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.cpu)
      // 绘制图表
      myChart.setOption({
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  }
}
</script>
<style scoped>
  #grid {
    font-size: 16px;
    text-align: center;
    margin-left: 1px;
    margin-bottom: 18px;
    width: 100%;
    height: 700px;
  }
  .computer {
    width: 98%;
    height: 60%;
    background-color:rgb(224, 229, 238);
    margin: 1%;
    border-radius: 10px;
    /* margin: 5px 5px 5px 5px; */
    /* padding: 5px 5px 5px 5px; */
  }
  .computertip {
    background-color: darkgray;
    border-radius: 10px 10px 0 0;
  }
  .cpu {
    width: 33%;
    height: 100%;
    float:left;
  }
  .memory {
    width: 33%;
    height: 100%;
    float:left;
  }
  .gpu {
    width: 33%;
    height: 100%;
    float:right;
  }
  .dataset {
    width: 23%;
    height: 40%;
    float:left;
    background-color:rgb(224, 229, 238);
    margin: 1%;
    border-radius: 10px;
  }
  .datasettip {
    background-color: rgb(161, 192, 238);
    border-radius: 10px 10px 0 0;
  }
  .model {
    width: 23%;
    height: 40%;
    float:left;
    background-color:rgb(224, 229, 238);
    margin: 1%;
    border-radius: 10px;
  }
  .modeltip {
    background-color: rgb(236, 135, 110);
    border-radius: 10px 10px 0 0;
  }
  .app {
    width: 23%;
    height: 40%;
    float:right;
    background-color:rgb(224, 229, 238);
    margin: 1%;
    border-radius: 10px;
  }
  .apptip {
    background-color: rgb(231, 196, 81);
    border-radius: 10px 10px 0 0;
  }
  .trainjob {
    width: 23%;
    height: 40%;
    float:left;
    background-color:rgb(224, 229, 238);
    margin: 1%;
    border-radius: 10px;
  }
  .trainjobtip {
    background-color: rgb(135, 236, 110);
    border-radius: 10px 10px 0 0;
  }
  .content {
    width: 100%;
    height: 40%;
  }
  .draw {
    width: 100%;
    height: 60%;
  }
  .linktext {
    margin-top:60px;
    margin-left:15px;
    text-align:left;
    font-size:14px;
  }
  /* .app .el-card__header {
    background-color: yellowgreen;
    border-bottom: 0px;
    height: 10px;
  } */
</style>
